<template>
  <div class="contents">
    <el-tabs v-model="activeName">
      <el-tab-pane label="列表模式" name="first">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="线路选择:">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="仓库:">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发货日期:">
            <el-date-picker
              v-model="formInline.value1"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <br />
          <el-form-item label="下单情况:">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="btn_group">
          <div>
            <el-button>添加客户</el-button>
            <el-button>使用地图排序</el-button>
            <el-button>一键解绑</el-button>
            <el-button>分享当前线路</el-button>
          </div>
          <div>
            <el-dropdown>
              <span class="el-dropdown-link">
                <span style="color: rgba(0, 0, 0, 0.7);">（张三）</span>
                切换司机
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>李四</el-dropdown-item>
                <el-dropdown-item>王五</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="table-header">
          <div class="table-selection"></div>
          <div class="table-head">
            <span class="item">
              已分配客户下单金额合计：
              <span class="warn-color">0</span>
            </span>
            <span class="item">
              分拣金额合计:
              <span class="warn-color">0</span>
            </span>
            <span class="item">
              客户数量：
              <span class="warn-color">0</span>
            </span>
            <span class="item">
              订单数量：
              <span class="warn-color">0</span>
              （已下0单）
            </span>
            <span class="item">
              体积(m³)：
              <span class="warn-color">0</span>
            </span>
            <span class="item">
              重量(KG)：
              <span class="warn-color">0</span>
            </span>
          </div>
        </div>
        <el-table :data="table1" style="width: 100%;">
          <el-table-column
            width="50px"
            type="selection"
            align="center"
          ></el-table-column>
          <el-table-column prop="address" label="顺序"></el-table-column>
          <el-table-column prop="address" label="区域"></el-table-column>
          <el-table-column prop="address" label="客户名称"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="address" label="业务员"></el-table-column>
          <el-table-column prop="address" label="订单笔数"></el-table-column>
          <el-table-column prop="address" label="下单金额"></el-table-column>
          <el-table-column prop="address" label="分拣金额"></el-table-column>
          <el-table-column prop="address" label="体积(m³)"></el-table-column>
          <el-table-column
            prop="address"
            fixed="right"
            label="操作"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="地图模式" name="second">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
            <el-select placeholder="活动区域" style="margin-left: 10px;">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button>全部解绑</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" class="set-line-main">
          <el-col :span="12">
            <div class="line-container">
              <div class="line-info title">全部线路</div>
              <div class="line-item" v-for="(item, index) in 5" :key="index">
                <div class="line-info">
                  <el-row type="flex" justify="space-between">
                    <el-col>线路7（HD）</el-col>
                    <el-col style="text-align: right;">
                      <span class="color-light">司机：</span>
                      张三
                    </el-col>
                  </el-row>
                  <el-row style="margin: 5px 0;">
                    <el-col :span="9">
                      <span class="color-light">下单:</span>
                      <span>0.00</span>
                    </el-col>
                    <el-col :span="7">
                      <span class="color-light">分拣:</span>
                      <span>0.00</span>
                    </el-col>
                    <el-col :span="8">
                      <el-tooltip
                        effect="dark"
                        content="线路绑定客户数"
                        placement="left"
                      >
                        <span>14</span>
                      </el-tooltip>
                      /
                      <el-tooltip
                        effect="dark"
                        content="线路订单数"
                        placement="right"
                      >
                        <span>0</span>
                      </el-tooltip>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="9">
                      <span class="color-light">体积:</span>
                      <span>0</span>
                      立方米
                    </el-col>
                    <el-col :span="8">
                      <span class="color-light">重量:</span>
                      <span>0</span>
                      KG
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-col>
          <el-col>
            <el-row type="flex" align="middle" style="padding: 5px;">
              <el-col :span="16">
                <el-row :gutter="10">
                  <el-col :span="4">
                    <span style="font-weight: bolder;">地图概况</span>
                  </el-col>
                  <el-col :span="5">
                    <span>总客户数：</span>
                    <span class="text-bold color-red">0</span>
                  </el-col>
                  <el-col :span="4">
                    <span>已排线：</span>
                    <span class="text-bold color-red">0</span>
                  </el-col>
                  <el-col :span="4">
                    <span>未排线：</span>
                    <span class="text-bold color-red">0</span>
                  </el-col>
                  <el-col :span="7">
                    <span>当前视野客户数：</span>
                    <span class="text-bold">0</span>
                  </el-col>
                  <el-col :span="6">
                    <span>未定位客户：</span>
                    <span class="text-bold">0</span>
                  </el-col>
                  <el-col :span="9">
                    <el-checkbox>不显示其他线路客户</el-checkbox>
                  </el-col>
                  <el-col :span="4">
                    <el-checkbox>显示客户名称</el-checkbox>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="8" style="text-align: right; margin-right: 4px;">
                <el-button>刷新</el-button>
                <el-button>开始圈选</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first',
        formInline: {},
        table1: [],
      }
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 0 20px 10px;

    .btn_group {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .table-header {
      background: rgba(250, 251, 252, 0.5);
      border-radius: 1px 1px 0 0;
      border: solid #e8e8e8;
      border-width: 1px 1px 0;
      height: 53px;
      padding: 0 18px;
      display: flex;
      align-items: center;
      margin-top: 16px;

      .table-head {
        .item {
          font-size: 13px;
          margin-right: 20px;

          .warn-color {
            color: #ff9f00;
          }
        }
      }
    }

    .set-line-main {
      border: 1px solid #e3e3e3;
      margin-top: 10px;
      border-radius: 2px;

      .line-container {
        padding: 5px;

        .line-info {
          width: 100%;
          cursor: pointer;
          margin-bottom: 5px;
          background: #f2f2f2;
          padding: 5px 10px;
        }

        .title {
          text-align: center;
          position: relative;
        }

        .color-light {
          color: #999;
        }
      }
    }

    .text-bold {
      font-weight: bolder;
    }
    .color-red {
      color: red;
    }
  }
</style>
